<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:p="http://primefaces.org/ui"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:ui="http://java.sun.com/jsf/facelets">

<h:head>
	<style>
.ui-panelgrid td {
	border-color: #ffffff;
}

.fondo {
	background-image: url("../../resources/imagenes/fondo_transp.png");
	background-repeat: no-repeat;
	background-position: right;
	background-opacity: 0.6;
}
</style>
</h:head>
<body>
	<p:panel id="basic" header="Propietario" style="width:700px"
		styleClass="fondo">
		<h:panelGrid columns="2" cellpadding="5">

			<h:outputLabel for="tipoDoc" value="Tipo Documento:" />
			<p:selectOneMenu value="" style="width:210px">
				<f:selectItem itemLabel="Seleccione uno" itemValue="" />
				<f:selectItem itemLabel="Option 1" itemValue="1" />
				<f:selectItem itemLabel="Option 2" itemValue="2" />
			</p:selectOneMenu>

			<h:outputLabel for="numDoc" value="Número Documento:" />
			<p:inputText></p:inputText>

			<h:outputLabel for="apellido" value="Apellido:" />
			<p:inputText></p:inputText>

			<h:outputLabel for="nombre" value="Nombre:" />
			<p:inputText></p:inputText>

			<h:outputLabel value="Fecha de Nacimiento:" />
			<p:calendar locale="es" navigator="true" pattern="dd-MM-yyyy" />


			<h:outputLabel for="email" value="E-mail:" />
			<p:inputText></p:inputText>

			<h:outputLabel for="cuil" value="CUIL:" />
			<p:inputText></p:inputText>
		</h:panelGrid>
		<p:spacer/>

		<p:fieldset legend="Domicilio" toggleable="true" toggleSpeed="500"
			collapsed="true" style="width:500px">
			<h:panelGrid columns="2" cellpadding="5">
				<h:outputLabel for="pais" value="País:" />
				<p:selectOneMenu value="" style="width:210px">
					<f:selectItem itemLabel="Select One" itemValue="" />
					<f:selectItem itemLabel="Option 1" itemValue="1" />
					<f:selectItem itemLabel="Option 2" itemValue="2" />
				</p:selectOneMenu>
				<h:outputLabel for="provincia" value="Provincia:" />
				<p:selectOneMenu value="" style="width:210px">
					<f:selectItem itemLabel="Select One" itemValue="" />
					<f:selectItem itemLabel="Option 1" itemValue="1" />
					<f:selectItem itemLabel="Option 2" itemValue="2" />
				</p:selectOneMenu>
				<h:outputLabel for="ciudad" value="Ciudad:" />
				<p:selectOneMenu value="" style="width:210px">
					<f:selectItem itemLabel="Select One" itemValue="" />
					<f:selectItem itemLabel="Option 1" itemValue="1" />
					<f:selectItem itemLabel="Option 2" itemValue="2" />
				</p:selectOneMenu>
				<h:outputLabel for="nombreBarrio" value="Barrio:" />
				<p:selectOneMenu value="" style="width:210px">
					<f:selectItem itemLabel="Select One" itemValue="" />
					<f:selectItem itemLabel="Option 1" itemValue="1" />
					<f:selectItem itemLabel="Option 2" itemValue="2" />
				</p:selectOneMenu>
				<h:outputLabel for="calle" value="Calle:" />
				<p:inputText style="width:200px"></p:inputText>
				<h:outputLabel for="numero" value="Número:" />
				<p:inputText style="width:100px"></p:inputText>
				<h:outputLabel for="piso" value="Piso:" />
				<p:inputText style="width:100px"></p:inputText>
				<h:outputLabel for="depto" value="Departamento:" />
				<p:inputText style="width:100px"></p:inputText>
				<h:outputLabel for="torre" value="Torre:" />
				<p:inputText style="width:100px"></p:inputText>
			</h:panelGrid>
		</p:fieldset>
		<p:spacer/>
		<p:fieldset legend="Telefono" toggleable="true" toggleSpeed="500"
			collapsed="true" style="width:500px">
			<h:panelGrid columns="2" cellpadding="5">
				<h:outputLabel for="numero" value="Número:" />
				<p:inputText></p:inputText>
			</h:panelGrid>
			<p:commandButton value="Agregar" icon="ui-icon-disk" />

			<p:separator id="separator" style="width:400px;text-align:right" />

			<p:dataTable var="" value="" rows="5" scrollable="true"
				editable="true" style="width:400px">

				<p:column headerText="Teléfonos">
					<p:cellEditor>
						<f:facet name="output">
							<h:outputText value="0351 4897654" />
						</f:facet>
						<f:facet name="input">
							<p:inputText id="modelInput" value="" style="width:100%" />
						</f:facet>
					</p:cellEditor>
				</p:column>

				<p:column headerText="Modificar"
					style="width:70px;text-align: center">
					<p:rowEditor />
				</p:column>

				<p:column style="width:70px;text-align: center"
					headerText="Eliminar">
					<p:commandButton update="" oncomplete="" icon="ui-icon-close"
						title="View">
						<f:setPropertyActionListener value="" target="" />
						<p:confirm header="Confirmation" message="Are you sure?"
							icon="ui-icon-alert" />
					</p:commandButton>

					<p:confirmDialog global="true" showEffect="fade" hideEffect="fade">
						<p:commandButton value="Yes" type="button"
							styleClass="ui-confirmdialog-yes" icon="ui-icon-check" />
						<p:commandButton value="No" type="button"
							styleClass="ui-confirmdialog-no" icon="ui-icon-close" />
					</p:confirmDialog>

				</p:column>
			</p:dataTable>

		</p:fieldset>

	</p:panel>

	<script type="text/javascript">
    PrimeFaces.locales["es"] = {
    closeText: "Cerrar",
    prevText: "Anterior",
    nextText: "Siguiente",
    monthNames: ["Enero","Febrero", "Marzo", "Abril", "Mayo", "Junio", "Julio", "Agosto", "Septiembre", "Octubre", "Noviembre", "Diciembre"],
    monthNamesShort: ["Ene", "Feb", "Mar", "Abr", "May", "Jun", "Jul", "Ago", "Sep", "Oct", "Nov", "Dic"],
    dayNames: ["Domingo", "Lunes", "Martes", "Miércoles", "Jueves", "Viernes", "Sábado"],
    dayNamesShort: ["Dom", "Lun", "Mar", "Mie", "Jue", "Vie", "Sab"],
    dayNamesMin: ["Do", "Lu", "Ma", "Mi", "Ju", "Vi", "Sa"],
    weekHeader: "Semana",
    firstDay: 0,
    isRTL: false,
    showMonthAfterYear: false,
    yearSuffix: "",
    timeOnlyTitle: "Solo hora",
    timeText: "Tiempo",
    hourText: "Hora",
    minuteText: "Minuto",
    secondText: "Segundo",
    currentText: "Fecha actual",
    ampm: false,
    month: "Mes",
    week: "Semana",
    day: "Día",
    allDayText : "Todo el día"
};
</script>
</body>
</html>
